<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的学生</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索添加区 -->
      <el-row :gutter="20">
        <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input v-model="queryInfo.Name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="请选择性别">
            <el-select v-model="queryInfo.Sex" placeholder="请选择性别">
              <el-option label="请选择" value=""></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Excel">导出Excel</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-button type="primary" @click="Excel">批量操作</el-button>
	 <el-button size="mini" type="" class="el-icon-s-operation" click  @click="EditdialogFormVisibles=true" >移除或添加</el-button>
		<!-- <div>移除
			<label>请选择表格需要展示的列：</label>
			<el-checkbox-group v-model="checkedTableColumns">
			
      <el-col
          v-for="(item, index) in tableLabel"
          :key="index"
          :span="6"
          style="height:35px"
        >
          <el-checkbox v-model="item.show">{{ item.label }}</el-checkbox>
        </el-col>
			</el-checkbox-group>
		</div> -->
      <!--用户列表区  -->
	  
 

	  <el-table
      ref="filterTable"
      :data="roleslist"
      size="small"
      border
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"

      :header-cell-style="headerStyle"
      :cell-style="{'text-align':'center'}"
      @cell-click="clickRow"
      @row-dblclick="rowdblclick"
      @selection-change="SelectChange"
    >
      <el-table-column :show-overflow-tooltip="true" sortable type="selection" width="45" />
  
      <template v-for="(item, index) in tableLabel">
        <el-table-column
          v-if="item.show"
          :key="index"
          :show-overflow-tooltip="true"
          sortable
          :prop="item.prop"
          :label="item.label"
        />
      </template>
      <el-table-column label="操作" width="240px">
          <template v-slot="scope">
            <!-- 分配角色按钮 -->
            <el-tooltip
              effect="dark"
              content="分配角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="setStudents(scope.row.Id)"
              ></el-button>
            </el-tooltip>
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.Id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.Id)"
            ></el-button>
           <el-button size="mini" type="warning" @click="Gen(scope.row)">跟踪</el-button>
          </template>
        </el-table-column>
    </el-table>

     
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-card>
<!-- <FileTable  :table-data="roleslist" :table-label="tableLabel" @rowdblclick="rowdblclick" @SelectChange="SelectChange" /> -->
    <!-- 修改用户的对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="form.Name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.Sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.Age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.Phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="form.StuStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个人状态">
          <el-input v-model="form.PerState" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="QQ">
          <el-input v-model="form.QQ" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="form.WeiXin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否访问:">
          <el-switch
            v-model="form.IsValid"
            active-color="#13ce66"
            active-value="是"
            inactive-value="否"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否回访">
          <el-switch
            v-model="form.IsReturnVist"
            active-color="#13ce66"
            active-value="是"
            inactive-value="否"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否上门">
          <el-switch
            v-model="form.IsHome"
            active-color="#13ce66"
            active-value="是"
            inactive-value="否"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否支付">
          <el-switch
            v-model="form.IsPay"
            active-color="#13ce66"
            active-value="是"
            inactive-value="否"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.Money" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
					<el-select v-model="form.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editset">确 定</el-button>
      </div>
    </el-dialog>

	<el-dialog title="编辑"  ref="dialog__wrapper" v-dialogDrag  :visible.sync="EditdialogFormVisibles" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in tableLabel"
          :key="index"
          :span="6"
          style="height:35px"
        >
          <el-checkbox v-model="item.show">{{ item.label }}</el-checkbox>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="EditdialogFormVisibles = false">保存</el-button>
      </div>
    </el-dialog>


<!-- 跟踪 -->
			<el-dialog title="跟踪学生" :visible.sync="dialogGenFormVisible" @close="Gendialogclosed">
				<el-form :model="Genform" ref="GenFormRef">
					<el-form-item label="学生编号" prop="Id" :label-width="formLabelWidth" >
						<el-input v-model="Genform.Id" auto-complete="off" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="学生姓名" prop="Name" :label-width="formLabelWidth" >
						<el-input v-model="Genform.Name" auto-complete="off" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="跟踪方式" prop="FollowType" :label-width="formLabelWidth">
						<el-input v-model="Genform.FollowType" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="回访情况" prop="FollowState" :label-width="formLabelWidth">
						<el-input v-model="Genform.FollowState" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="跟踪时间" prop="FollowTime" :label-width="formLabelWidth">
						 <el-date-picker v-model="Genform.FollowTime" type="datetime" placeholder="选择日期"></el-date-picker>
					</el-form-item>
					<el-form-item label="内容" prop="Content1" :label-width="formLabelWidth">
						<el-input v-model="Genform.Content1" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="下次跟踪时间" prop="NextFollowTime" :label-width="formLabelWidth">
						<el-date-picker v-model="Genform.NextFollowTime" type="datetime" placeholder="选择日期"></el-date-picker>
					</el-form-item>
					<el-form-item label="咨询师名称" :label-width="formLabelWidth">
						<el-select v-model="Genform.AskerId" placeholder="请选择咨询师">
						      <el-option v-for="item in ZiXunShiList" :label="item.AskerName" :value="item.AskerId"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogGenFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="GenUser">确 定</el-button>
				</div>
			</el-dialog>
  </div>
</template>
<script>
import FileTable from '@/components/FileTable/FileTable.vue'
export default {
	components: { FileTable },
  data() {
    return {
      //获取用户列表的参数对象
      queryInfo: {
        Name: "",
        Sex: "",
        //当前的页数
      },
      roleslist: [], //table数据
      page: 1,
      //当前每页显示多少条数据
      limit: 10,
      count: 0,
      form: {},
      dialogFormVisible: false,
	 EditdialogFormVisibles: false,
   dialogGenFormVisible:false,
   Genform:{},
      value: "",
      tableLabel: [
        { prop: "Id", label: "编号", show: true ,key:"1"},
        { prop: "Name", label: "姓名", show: true ,key:"2"},
        { prop: "Sex", label: "性别", show: true ,key:"3"},
        { prop: "Age", label: "年龄", show: true ,key:"4"},
        { prop: "Phone", label: "电话", show: true ,key:"5"},
        { prop: "StuStatus", label: "学历", show: true ,key:"6"},
        { prop: "PerState", label: "个人状态", show: true ,key:"7"},
        { prop: "Address", label: "所在区域", show: true ,key:"8"},
        { prop: "AskerName", label: "咨询师姓名", show: true ,key:"9"},
        { prop: "AskerContent", label: "内容", show: true ,key:"10"},
        { prop: "QQ", label: "QQ", show: true ,key:"11"},
        { prop: "WeiXin", label: "微信", show: true ,key:"12"},
        { prop: "IsValid", label: "是否访问", show: true ,key:"13"},
        { prop: "IsReturnVist", label: "是否回访", show: true ,key:"14"},
        { prop: "FirstVilitTime", label: "首次访问时间", show: true ,key:"15"},
        { prop: "IsHome", label: "是否上门", show: true ,key:"16"},
        { prop: "HomeTime", label: "上门时间", show: true ,key:"17"},
        { prop: "IsPay", label: "是否支付", show: true ,key:"18"},
        { prop: "PayTime", label: "支付时间", show: true ,key:"19"},
        { prop: "Money", label: "金额", show: true ,key:"20"},
      ],
	  colSelect:[],
ZiXunShiList:[],
      //控制添加用户对话框的显示与隐藏
      addDialogVisible: false,
      //添加用户的表单数据
      addForm: {
        Name: "",
      },
      //添加表单的验证规则对象
      addFromRules: {},
      //控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      //查询到的用户信息对象
      editForm: {},
      // 修改表单的验证规则对象
      editFormRules: {},
      //控制分配角色对话框的显示与隐藏
      setRoleDialogVisible: false,
      // 需要被分配角色的用户信息
      userInfo: {},
      //所有角色的数据列表
      roleslist: {},
      //已选中的角色Id值
      selectedRoleId: "",
    };
  },
  created() {
    this.getStudentsList();
    this.GetZiXunShiList();
  },
  methods: {
    async getStudentsList() {
      const { data: res } = await this.$http.get(
        "api/Students/GetStudentsList?page=" +
          this.page +
          "&limit=" +
          this.limit +
          "&Name=" +
          this.queryInfo.Name +
          "&Sex=" +
          this.queryInfo.Sex
      );
      console.log(res);
      if (res.code !== 0) {
        return this.$message.error("获取用户列表失败");
      }
      this.roleslist = res.data;
      this.count = res.count;
    },
    onSubmit() {
      this.getStudentsList();
    },

    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      //console.log(newSize)
      this.limit = newSize;
      this.getStudentsList();
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      //console.log(newPage)
      this.page = newPage;
      this.getStudentsList();
    },
    handleCurrentChange(val) {
      console.log(val);
  

    },
	 // 单击选中某一行选框
    clickRow(row) {
      this.$refs.filterTable.toggleRowSelection(row)
      this.$emit('clickRow', row)
    },
    // 双击选中某一行
    rowdblclick(row) {
      this.$emit('rowdblclick', row)
    },
    // 选中一行或者多行数据
    SelectChange(val) {
      this.$emit('SelectChange', val)
    },
    // 翻页序号连续
    indexMethod(index) {
      return (index + 1)
    },
    Gen(row){
      console.log(row)
				this.Genform=row;
				this.dialogGenFormVisible=true;
			},
			GenUser(){
				this.$refs.GenFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Students/GenUser', this.Genform)
					if (res.code == -1) {
						this.$message.error("跟踪失败！")
					}else{
						this.$message.success("跟踪成功！");
						this.dialogGenFormVisible = false;
						this.getTableList();
					}
				})
			},
      async GetZiXunShiList() {
				const {
					data: res
				} = await this.$http.post('api/Students/GetZiXunShi')
				this.ZiXunShiList = res;
				console.log(res)
			},
    //展示编辑用户的对话框
    // 打开编辑弹框
    async edit(Id) {
      console.log(Id);
      const { data: res } = await this.$http.get(
        "api/Students/GetStudentsById?Id=" + Id
      );
      console.log(res);
      if (res.code !== 0) {
        return this.$message.error("查询用户信息失败!");
      }
      this.dialogFormVisible = true;
      this.form = res.data;
    },
    // 编辑功能// //修改用户信息并提交
    editset() {
      console.log(this.form);
      let _this = this;
      this.$http.post("api/Students/Edit", this.form).then(function (res) {
        if (res.data.code == 0) {
          _this.$message.success(res.data.msg);
          _this.form = {};
          _this.dialogFormVisible = false;
          _this.getStudentsList();
        } else {
          _this.$message.info(res.data.msg);
        }
      });
    },
    // 删除
    del(Id) {
      console.log(id);
      let _this = this;
      this.$http.post("api/Students/Del?Id=" + Id).then(function (res) {
        if (res.data.code == 0) {
          _this.$message.success(res.data.msg);
          _this.GetStuList();
        } else {
          _this.$message.info(res.data.msg);
        }
      });
    },
    split() {
      let row = this.tableData;
      console.log(row);

      for (let i = 0; i < row.length; i++) {
        console.log(row[i].FirstVilitTime);
        row[i].CreateTime = row[i].CreateTime.replace(/T/, " ");
        if (row[i] !== null) {
          row[i].FirstVilitTime = row[i].FirstVilitTime.replace(/T/, " ");
        }
      }
      console.log(row);
      this.tableData = row;
    },
    //监听修改用户对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
  },
  mounted: function () {
    this.getStudentsList();
  },
  computed: {
	//   columnChange(val) {
	// 	this.tableColumns.filter(i => {
	// 		if (this.colSelect.indexOf(i.label) !== -1) {
	// 		i.show = false
	// 		} else {
	// 		i.show = true
	// 		}
	// 	})
	// },
    bindTableColumns() {
      return this.tableColumns.filter((column) => column.show);
    },
	/* 这里使用了getter和setter，这样写的好处是不用自己手动监听复选框的选中事件 */
    checkedTableColumns: {
        get() {
          // 返回选中的列名
                 return this.bindTableColumns.map(column => column.prop);
        },
        set(checked) {
          // 设置表格列的显示与隐藏
          this.tableColumns.forEach(column => {
            // 如果选中，则设置列显示
            if(checked.includes(column)) {
              column.show = true;
            } else {
              // 如果未选中，则设置列隐藏
              column.show = false;
            }
          })
	}
	}
 }
};
</script>


<style Lang="less" scoped>
</style>